#{extends 'main.html' /}
#{set title:'产品列表' /}

<script type="text/javascript" src="/public/sui/js/lrz.all.bundle.js"></script>
<script type="text/javascript" src="/public/sui/js/uploadImg.js"></script>
<script type="text/javascript" src="/public/sui/js/list.js"></script>
<script type="text/javascript" src="/public/sui/js/proTypeCom.js"></script>
<script>
    var _status = false;
    var id  ;
    var page_size = 1;
    var isLoading = false;
    $(function() {
        var typeIndex = '${typeIndex.id}';
        initShowPro(typeIndex);
        $(document).on('click', '.rightbar', function () {
            $('.centerbar').removeClass('active');
            _status = false;
        });
        $(document).on('click', '.firstLevel', function () {
            $(".menu li").removeClass("active");
            $(this).parent().addClass("active");
            var nodeId = $(this).attr("nodeId");
            if (!_status || id != nodeId) {
                if(id != nodeId){
                    page_size = 1;
                    id = nodeId;
                    firstLevelThings(1 , 1);
                }
                id = nodeId;
                if (id == null || id == 0)return;
                $.getJSON("/product/secondLevel", {id: id},
                        function (data) {
                            if(data.success){
                                $('.centerbar').addClass('active');
                                var gettpl = document.getElementById('second_level_tpl').innerHTML;
                                laytpl(gettpl).render(data, function (html) {
                                    document.getElementById('secondLevel').innerHTML = html;
                                });
                            }else {
                                $('.centerbar').removeClass('active');
                                return;
                            }
                        });
                _status = true;
            } else {
                $('.centerbar').removeClass('active');
                _status = false;
            }

        });
        $(document).on('click', '.secondLevel', function () {
            var id = $(this).attr("nodeId");
            if (id == null || id == 0)return;
            $('.centerbar').removeClass('active');
            _status = false;
            $.getJSON("/product/loadList", {id: id,pageNum:1},
                    function (data) {
                        $.detachInfiniteScroll($('.infinite-scroll'));
                        var gettpl = document.getElementById('product_list_tpl').innerHTML;
                        laytpl(gettpl).render(data.productList, function (html) {
                            document.getElementById('productList').innerHTML = html;
                            $("#productList").scrollTop(0);
                        });
                        $.refreshScroller();
                    })
        });


        $.init()

    });
</script>
<body>
<div class="page-group">
    <div class="page">
        <header class="bar bar-nav">
            <a href="javascript:history.go(-1);" class="icon icon-left pull-left"></a>
            <a href="/product/detail" class="button button-link pull-right external">添加</a>
            <h1 class="title">产品列表</h1>
        </header>
        <section class="product">
            <div class="leftbar pull-left">
                <ul class="menu scroll_y">
                #{list typeList , as:'type'}
                    <li><a href="#" class="firstLevel" id="firstType_${type_index}" nodeId="${type.id}">${type.name}</a></li>
                #{/list}
                </ul>
            </div>
            <div class="centerbar pull-left" id="secondLevel">

            </div>
            <div class="mask"></div>
            <div class="rightbar infinite-scroll-bottom">
                <dl id="productList"  class="mlist content infinite-scroll">
                </dl>
            </div>
        </section>
    #{include '/ProductCtrl/tempProductList.html'/}
    #{include '/ProductCtrl/indexTwoTypeTemp.html'/}
    #{include 'footer.html'/}




    </div>

</div>

</body>
